<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-13 14:01:52
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-09 13:53:21
 * @FilePath: \robot\src\views\patroling\PatrolingBottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div data-test="patroling-bottom" class="h-full flex items-center">
    <div
      v-for="item in tabList"
      :key="item.index"
      class="flex-1 flex justify-center cursor-pointer"
      @click="changeTab(item)"
    >
      <SvgIcon class="w-11" :name="`patroling-${isHighLight(item)}`"></SvgIcon>
    </div>
    <div
      class="flex-1 flex justify-center cursor-pointer"
      @click="notificationDrawer = true"
    >
      <el-badge
        :value="notifications.length"
        :hidden="notifications.length === 0"
      >
        <el-icon :size="40" color="#497a98">
          <ChatLineSquare />
        </el-icon>
      </el-badge>
    </div>
    <el-drawer v-model="notificationDrawer" title="管理通知" direction="rtl">
      <div
        v-for="(item, index) in notifications"
        :key="item.time"
        class="p-5 shadow-md mb-5 font-bold relative"
        :class="notificationType(item.type)"
      >
        <div
          class="text-3xl absolute right-2 top-0 cursor-pointer"
          @click="removeNotification(index)"
        >
          ×
        </div>
        <div class="mb-5">{{ item.time }}</div>
        <div>{{ item.id }} {{ item.message }}</div>
      </div>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import { toRefs, ref } from "vue";
import usePatrolingStore from "@/store/patroling";

const { notifications, removeNotification } = usePatrolingStore();

const props = defineProps({
  curTab: {
    type: Number,
    required: true,
  },
});
// 当前选中的底部菜单
const { curTab } = toRefs(props);

// 菜单列表
const tabList = [
  {
    index: 0,
    icon: ["bottom_tab_01_n", "bottom_tab_01_c"],
  },
  {
    index: 1,
    icon: ["bottom_tab_02_n", "bottom_tab_02_c"],
  },
  {
    index: 2,
    icon: ["bottom_tab_03_n", "bottom_tab_03_c"],
  },
  {
    index: 3,
    icon: ["bottom_tab_04_n", "bottom_tab_04_c"],
  },
];

/**
 * @description: 当前选中的标签高亮
 * @param {*} item
 * @return {*}
 */
function isHighLight(item) {
  return item.index === curTab.value ? item.icon[1] : item.icon[0];
}

const emit = defineEmits(["update:curTab"]);
/**
 * @description: 点击底部切换页面
 * @param {*} item
 * @return {*}
 */
function changeTab(item) {
  emit("update:curTab", item.index);
}

const notificationDrawer = ref(false);
function notificationType(type) {
  switch (type) {
    case "warning":
      return "bg-[#fbde47] text-[#000]";
    case "error":
      return "bg-[#dd0612] text-[#fff]";
    default:
      return "bg-[#4d99f9] text-[#fff]";
  }
}
</script>
